<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/page/layout/layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<h:outputStylesheet>
a.no-decor>img {
    border: none;
}
</h:outputStylesheet>
	<ui:define name="title">Agregar operacion</ui:define>

	<ui:define name="content">
	
		<h:form id="form">
			<h:panelGrid columns="4" id="addGrid">
				<h:outputText value="Buque" />
				<rich:select id="buque" value="#{addOperacionView.edited.buque}"
					enableManualInput="true" defaultLabel="nombre del buque"
					required="true">
					<f:selectItems value="#{addOperacionView.buquesOptions}"  var="buque"
							itemValue="#{buque}" itemLabel="#{buque.buqueNombre}" />
				</rich:select>
				<h:message for="buque" />
				<h:panelGroup />
				<h:outputText value="Cliente" />
				<rich:select id="cliente" value="#{addOperacionView.edited.cliente}"
					enableManualInput="true" defaultLabel="nombre del cliente"
					required="true">
					<f:selectItems value="#{addOperacionView.clientesOptions}" var="cliente" 
							itemValue="#{cliente}" itemLabel="#{cliente.clienteNombre}" />
				</rich:select>
				<h:message for="cliente" />

				<h:panelGroup />
				<h:outputText value="Agencias" />
				<rich:select id="agenciaNacional" value="#{addOperacionView.edited.agenciaNacional}"
					enableManualInput="true" defaultLabel="nombre de la agencia"
					required="true">
					<f:selectItems value="#{addOperacionView.agenciasOptions}" var="agenciaNacional" 
							itemValue="#{agenciaNacional}" itemLabel="#{agenciaNacional.agenciaNacionalNombre}" />
				</rich:select>
				<h:message for="agenciaNacional" />
				<h:panelGroup />
				
				<h:outputText value="Tipo operacion" />
				<rich:select id="operacionTipo"
					value="#{addOperacionView.edited.operacionTipo}" size="32" defaultLabel="tipo de operacion"
					required="false">
					<f:selectItems value="#{inplaceSelectBean.tiposOperaciones}" var="tipoOperacion" 
							itemValue="#{tipoOperacion}" itemLabel="#{tipoOperacion}" />
				</rich:select>
				<h:message for="operacionTipo" />
				<h:panelGroup />
				<h:outputText value="Import/Export" />
				<h:inputText label="Import/Export"
					id="operacionExportacionImportacion"
					value="#{addOperacionView.edited.operacionExportacionImportacion}"
					size="11" required="false">
					<f:validateLength maximum="11" />
				</h:inputText>
				<h:message for="operacionExportacionImportacion" />
				<h:panelGroup />
				<h:outputText value="Dias Estadia" />
				<rich:inputNumberSpinner id="operacionTiempoEstadia"
					value="#{addOperacionView.edited.operacionTiempoEstadia}" step="1">
				<f:validateLongRange minimum="0" maximum="100"/>
				</rich:inputNumberSpinner>
				<h:message for="operacionTiempoEstadia"/>
				<h:panelGroup />
				<h:outputText value="Fecha de la operacion" />
				<rich:calendar id="operacionFecha" mode="ajax"
					boundaryDatesMode="scroll"
					value="#{addOperacionView.edited.operacionFecha}" />
				<h:message for="operacionFecha" />
				<h:panelGroup />
				<h:outputText value="Carga/Descarga" />
				<h:inputText label="Carga/Descarga" id="operacionCargaDescarga"
					value="#{addOperacionView.edited.operacionCargaDescarga}" size="8"
					required="false">
					<f:validateLength maximum="8" />
				</h:inputText>
				<h:message for="operacionCargaDescarga" />
				<h:panelGroup />
				<h:outputText value="Origen" />
				<h:inputText label="operacionOrigen" id="operacionOrigen"
					value="#{addOperacionView.edited.operacionOrigen}" size="30"
						required="false">
					<f:validateLength maximum="30" />
				</h:inputText>
				<h:message for="operacionOrigen" />
				<h:panelGroup />
				<h:outputText value="Destino" />
				<h:inputText label="Destino" id="operacionDestino"
					value="#{addOperacionView.edited.operacionDestino}" size="30"
						required="false">
					<f:validateLength maximum="30" />
				</h:inputText>
				<h:message for="operacionDestino" />
				<h:panelGroup />
				<h:outputText value="Costo Total" />
				<h:inputText label="operacionCostoTotal" id="operacionCostoTotal"
					value="#{addOperacionView.edited.operacionCostoTotal}" size="10"
						required="false">
					<f:validateDoubleRange minimum="0" />
				</h:inputText>
				<h:message for="operacionCostoTotal" />
				<h:panelGroup />
				<h:outputText value="Observaciones" />
				<h:inputTextarea label="operacionObservaciones"
					id="operacionObservaciones"
					value="#{addOperacionView.edited.operacionObservaciones}"
					size="100" required="false" />
				<h:panelGroup />
			</h:panelGrid>

			<a4j:commandButton value="Guardar" execute="form"
					action="#{addOperacionView.store}" render="form"
					oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('confirmSelectPane')}.show();}">
			</a4j:commandButton>
			
		</h:form>

		<a4j:jsFunction name="ocultar" render="table" execute="@this"
				oncomplete="#{rich:component('confirmSelectPane')}.hide();" />

		<rich:popupPanel id="confirmSelectPane" autosized="true">
				Operacion ha sido dada de alta correctamente.
			<a4j:commandButton value="Ok" onclick="ocultar(); return true;" />
		</rich:popupPanel>

	</ui:define>
</ui:composition>
